import React, { Component } from 'react';
import {
  Text,
  View,
  Dimensions, Image
} from 'react-native';
import Carousel from 'react-native-looped-carousel';

const { width, height } = Dimensions.get('window');

export default class TopBanner extends Component {

  constructor(props) {
    super(props);

    this.state = {
      size: { width, height },
    };
  }

  _onLayoutDidChange = (e) => {
    const layout = e.nativeEvent.layout;
    this.setState({ size: { width: layout.width, height: layout.height } });
  };

  render() {
    const BANNER_IMGS = [
      require('../../../images/slider/slider_01.jpg'),
      require('../../../images/slider/slider_02.jpg'),
      require('../../../images/slider/slider_03.jpg'),
      require('../../../images/slider/slider_04.png'),
      require('../../../images/slider/slider_05.png')
    ];
    return (
      <View style={{ height: 160 }} onLayout={this._onLayoutDidChange}>
        <Carousel
          delay={2000}
          style={this.state.size}
          autoplay
          pageInfo={false}
          bullets={true}  //显示小圆点
          // onAnimateNextPage={(p) => console.log(p)}
        >
          {BANNER_IMGS.map((index) =>
            <View key={index} style={[ this.state.size]}>
              <Image source={BANNER_IMGS[index - 1]} style={{width:'100%',height:'100%'}} resizeMode="stretch"/>
            </View>
          )}
        </Carousel>
      </View>
    );
  }
}